<template>
    <div class="newsinfo">
        <h3>{{ newsinfo.title }}</h3>
        <p>
            <span>发表时间：<span>{{ newsinfo.add_time }}</span></span>
            <span>点击 <span>{{ newsinfo.click }}</span> 次</span>
        </p>
        <div class="hr"></div>    
        <div class="content" v-html="newsinfo.abstract"></div>
        <!-- 评论区 -->
        <comment-box :id="this.id"></comment-box>

    </div>
</template>

<script>
    import Comment from '../subcomponents/Comment' // 引入评论组件
    export default {
        data() {
            return {
                id: this.$route.params.id,  // 将 URL 地址中传递过来的 id 值，挂载到 data上
                newsinfo: {}
            }
        },
        methods: {
            getNewsInfo(){
                let url = "https://www.fastmock.site/mock/3bcb60e708abec194c722ac5464b28d8/VueApp/getnewslist"
                this.$http.get(url).then(result=>{
                    if(result.status == 200){
                        var news = result.data.message
                        for(let i=0;i<news.length;i++){
                            if(news[i].id == this.id){
                                this.newsinfo = news[i]
                            }
                        }
                    }
                })
            }
        },
        created() {
            this.getNewsInfo()
        },
        components: { // 注册子组件
            "comment-box": Comment
        }
    }
</script>

<style lang="scss" scpoed>
    .newsinfo{
        h3{
            text-align: center;
            font-size: 18px;
            line-height: 1.4em;
            font-weight: bold;
            padding-left: 10px;
            padding-top: 10px;
            padding-right: 10px;
            color: crimson;
        }
        &>p{
            font-size: 12px;
            margin-left: 10px;
            padding-right: 10px;
            display: flex;
            justify-content: space-between;
            color: silver;
            span{
                &:nth-child(1)>span{
                    color: darkcyan;
                }
                &:nth-child(2)>span{
                    color: crimson;
                    font-weight: bold;
                }
            }
        }
        .hr{
            width: 94%;
            height: 1px;
            background-color: silver;
            margin: auto;
        }
        .content{
            margin-top: 10px;
            text-indent: 2em;
            padding: 0 10px 10px 10px;
            font-size: 14px;
            text-align: justify;
            line-height: 1.75em;
            p{
                color: #000;
            }
        }
    }
</style>